import React, { Component } from 'react'
import "../assets/styles/content.css"
import TabA from './TabA'
import TabB from './TabB'
import TabC from './TabC'
import TabD from "./TabD"

export default class Content extends Component {
    state = {
        active:"TabA",
        msg:"xiaowang"
    }

    check(val){
        console.log(123,val);
        console.log(this);
        // this.state.active = val
        // console.log(this.state.active);
        //要更新state的数据，必须调用setState，React更新页面
        this.setState({
            active:val
        })
    }

    show(){
        const {active} = this.state
        switch(active){
            case "TabA":return <TabA></TabA>
            case "TabB":return <TabB></TabB>
            case "TabC":return <TabC></TabC>
            case "TabD":return <TabD></TabD>
        }
    }
    
    render() {
        console.log("render");
        const {active,msg} = this.state
        return (
            <React.Fragment>
                <div className='menu'>
                    <ul>
                        {/* <li @click="check(123)"></li> */}
                        <li onClick={()=>this.check("TabA")} className='active'>拼团管理</li>
                        <li onClick={()=>this.check("TabB")}>拼团数据</li>
                        <li onClick={()=>this.check("TabC")}>扩展内容</li>
                        <li onClick={()=>this.check("TabD")}>中奖名单</li>
                    </ul>
                </div>
                <div className='main'>
                    {/* <h1>{active}</h1>
                    <h1>{msg}</h1>
                    <TabA></TabA>
                    <TabB></TabB>
                    <TabC></TabC> */}
                    {this.show()}
                </div>
            </React.Fragment>
        )
    }
}
